<template>
	<div class="base-select text-left">
		<div v-if="label || labelT || !!$slots.title" class="base-input-title h-[26px]">
			<slot name="title">
				<div class="flex items-center">
					<base-text :text="label" :textT="labelT" />
					<span v-if="required" class="text-danger">&nbsp;*</span>
				</div>
			</slot>
		</div>
		<base-dropdown
			:options="options"
			v-model:show="dropdownShow"
			:modelValue="modelValue"
			:icon-class="iconClass"
			:readonly="readonly"
			:disabled="disabled"
			@select="onSelect"
			immediate
			v-bind="$attrs"
			v-slot:default="{ data }">
			<n-popover
				:show="showPopover"
				:animated="false"
				:placement="isPC() ? 'left' : 'bottom'"
				:iconClass="iconClass">
				<template #trigger>
					<div
						class="w-full h-12 relative flex justify-end items-center rounded-lg px-3 bg-bg-2 border border-bg-2 focus:outline-none focus-within:border-primary hover:border-primary transition-colors duration-300"
						:class="[triggerClass, { '!border-bg-2': readonly || disabled }]"
						tabindex="0">
						<slot name="prefix"></slot>
						<slot>
							<base-image
								v-if="data?.icon"
								:src="data?.icon"
								class="w-5 h-5 mr-2"
								:class="iconClass" />
							<base-image
								v-if="data?.iconImg || data?.img"
								:src="data?.iconImg || data?.img"
								class="w-5 h-5 mr-2"
								:class="iconClass"
								type="server" />
							<base-image
								v-if="data?.iconSrc"
								:src="data?.iconSrc"
								class="w-5 h-5 mr-2"
								:class="iconClass"
								type="network" />
							<n-ellipsis v-bind="NBind.Ellipsis" class="flex-auto w-[1px]">
								<base-text
									class="flex-1 text-t-1"
									:class="{ '!text-t-3': readonly || disabled }"
									:text="data?.text"
									:textT="data?.textT" />
							</n-ellipsis>
						</slot>
						<base-icon
							:name="arrow"
							size="16"
							class="text-t-3 text-sm duration-300"
							:class="{ 'rotate-180': dropdownShow }" />
					</div>
				</template>
				<base-input-error :text="error" :textT="errorT" />
			</n-popover>
		</base-dropdown>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { NEllipsis, NPopover } from 'naive-ui'
import BaseDropdown, { DropdownItemType } from '@/components/base/dropdown/index.vue'
import BaseIcon from '@/components/base/icon/index.vue'
import BaseImage from '@/components/base/image/index.vue'
import BaseInputError from '@/components/base/input-error/index.vue'
import BaseText from '@/components/base/text/index.vue'
import { NBind } from '@/plugins/naive-ui'
import { isPC } from '@/utils'

const props = defineProps({
	modelValue: {
		type: [String, Number],
		required: true
	},
	options: {
		type: Array<DropdownItemType>,
		default: () => []
	},
	label: {
		type: String,
		default: ''
	},
	labelT: {
		type: String,
		default: ''
	},
	required: {
		type: Boolean,
		default: false
	},
	readonly: {
		type: Boolean,
		default: false
	},
	disabled: {
		type: Boolean,
		default: false
	},
	error: {
		type: String,
		default: ''
	},
	errorT: {
		type: String,
		default: ''
	},
	arrow: {
		type: String,
		default: 'down2'
	},
	triggerClass: {
		type: [String, Array, Object],
		default: ''
	},
	iconClass: {
		type: [String, Array, Object],
		default: ''
	}
})

const emits = defineEmits(['update:modelValue'])

const showPopover = computed(() => {
	return !!props.error || !!props.errorT
})

const dropdownShow = ref(false)

const onSelect = (val: string | number) => emits('update:modelValue', val)
</script>
